<script setup lang="ts">
const props = defineProps<{
  product: {
    image: string;
    title: string;
    price: number;
    sales: number;
  };
}>();
</script>

<template>
    <view
        class="product-card"
        v-if="props?.product"
    >
        <view class="product-image-content">
            <image
                :src="props.product?.image"
                class="product-image"
                mode="aspectFill"
            />
            <image src="" class="like-icon" />
        </view>

        <view class="product-info">
            <text class="truncate product-title"
                >{{ props.product?.storeName }}</text
            >
            <view class="product-meta">
                <text class="product-price">¥{{ props.product?.price }}</text>
                <text class="product-sales">销量 {{ props.product?.totalOrder }}</text>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.product-card {
  width: 335rpx;
  height: 404rpx;
  background: #f3f7f8;
  border-radius: 8rpx 8rpx 0rpx 0rpx;
  border: 2rpx solid #e4edef;
  //padding: 30rpx 16rpx 20rpx;
  .product-image-content {
    position: relative;
    .product-image {
      display: flex;
      width: 335rpx;
      height: 294rpx;
      background: #f3f7f8;
      border-radius: 8rpx 8rpx 0rpx 0rpx;
      border: 2rpx solid #e4edef;
    }
    .like-icon {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 28px;
    }
  }
  .product-info {
    //width: 335rpx;
    //height: 110rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 8rpx 8rpx;
    border: 2rpx solid #e4edef;
    padding: 16rpx;
    .product-title {
      display: block;
      width: 300rpx;
      height: 32rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
      line-height: 32rpx;
    }
    .product-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 8rpx 0 0;
      .product-price {
        height: 38rpx;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
        text-align: left;
      }
      .product-sales {
        font-weight: 400;
        font-size: 20rpx;
        color: #666666;
      }
    }
  }
}
</style>
